<template>
  <div class="nav"><HeaderView></HeaderView></div>
  <div class="video">
    <VideoPlayer :videoSrc="url" :videoTitle="title"></VideoPlayer>
    <div class="des">
      <el-card style="width: 100%" shadow="never">{{ title }} <font color="blue">{{ ifc() }}</font></el-card>
    </div><br>
    <div v-if="jis === 'true'" class="list_video">
      <div v-for="lists in list" :key="lists.id">
        <el-card style="width: 100px; text-align: center;" shadow="never" body-style="--el-card-padding: 10px;" @click="tab(lists.title, lists.video)">{{ lists.title }}</el-card>
      </div>
    </div>
    <br>
    <span class="fs24px">热门动漫</span>
    <div v-if="!isVideoListEmpty"><VideoList :videos="video_list" data-aos="fade-up" data-aos-duration="500"/></div>
      <div v-else>
        <el-empty description="当前内容为空！" />
      </div>
  </div>
  <div class="footer" data-aos="fade-up" data-aos-duration="500">
    <p
      style="display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      opacity: 0.6;
      margin: 20px 0;"
      data-aos="fade-up" data-aos-duration="500"
    >
      Copyright © {{ new Date().getFullYear() }}
      <el-link
        type="primary"
        href="#/"
        style="margin: 0 5px;"
        data-aos="fade-up" data-aos-duration="500"
      >动漫宇宙</el-link>
      . All Rights Reserved.
    </p>
  </div>
</template>
<script setup>
import VideoPlayer from './player.vue'
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import VideoList from '@/layout/videoList.vue';
import { printInfo } from '@/util/log';
import axios from 'axios';
const router = useRoute();
import { useStore } from 'vuex';
import HeaderView from '../layout/AppHeader.vue'
import AOS from 'aos';

const store = useStore();

const isLoggedIn = computed(() => !!store.state.Authorization)

const id = ref(parseInt(router.params.name, 10) - 1);

const ji = ref('')

const name = ref([])
if (JSON.parse(localStorage.getItem('video_list'))[id.value] == null) {
  name.value = ''
} else {
  name.value = JSON.parse(localStorage.getItem('video_list'))[id.value]['name']
}

const jis = ref(JSON.parse(localStorage.getItem('video_list'))[id.value]['jis']);

const list = ref([]);
if (JSON.parse(localStorage.getItem('video_list'))[id.value]['jis'] == 'true') {
  list.value = JSON.parse(localStorage.getItem('video_list'))[id.value]['list']
}

const video_list = ref([]);

const queryVideoList = async () => {
  try {
    const res = await axios.post(import.meta.env.VITE_API_HOST + '/api.php');
    video_list.value = res.data.data;
  } catch (error) {
    console.error(error);
    printInfo({ title: "哎呀出错啦", text: error, type: "error", plain: true });
  }
}
queryVideoList();

const isVideoListEmpty = computed(() => {
  return video_list.value.length === 0;
});

const title = ref(name);
const values = JSON.parse(localStorage.getItem('video_list'))[id.value]['video']
const url = ref(values);

const tab = (title, urls) => {
  url.value = urls;
  const page = {
    title: title,
    url: urls
  };
  localStorage.setItem('Page', JSON.stringify(page))
  ji.value = title
}

watch(
  () => router.params,
  (newParams) => {
    const ids = parseInt(newParams.name, 10) - 1;
    name.value = JSON.parse(localStorage.getItem('video_list'))[ids]['title'];
    title.value = name.value;
    url.value = JSON.parse(localStorage.getItem('video_list'))[ids]['video'];
    jis.value = JSON.parse(localStorage.getItem('video_list'))[ids]['jis'];
    if (jis.value == true) {
      list.value = JSON.parse(localStorage.getItem('video_list'))[ids]['list'];
      if (ji.value == ''){
        ji.value = '第1集'
      }
    } else {
      ji.value = ''
    }
    // 重新查询视频列表
    queryVideoList();
  },
  { immediate: true }
);

const ifc = () => {
  if (ji.value != ''){
    return ji.value;
  } else {
    if (jis.value == true) {
      ji.value = '第1集'
    } else {
      ji.value = ''
    }
  }
}

if (jis.value == true) {
  if (localStorage.getItem('Page')) {
    tab(JSON.parse(localStorage.getItem('Page'))['title'], JSON.parse(localStorage.getItem('Page'))['url']);
  }
}

onMounted(() => {
  AOS.init({
    easing: "ease", // AOS 动画默认 easing
    mirror: true, // 滚动到元素上方时是否应设置动画
    initClassName: "aos-init", // 初始化后使用的 class 类
    duration: 500, // 取值范围 0-3000, 每多 1 加 50ms
    debounceDelay: 50, // 调整窗口大小时使用的 (高级)
    throttleDelay: 100, // 滚动页面时使用的延迟 (高级)
    offset: 0, // 从原始触发点的偏移量 (px)
  });
  if (isLoggedIn.value) {
    printInfo({ title: "登录成功", text: "欢迎回来", type: "success", plain: true });
  } else {
    printInfo({ title: "登录失败", text: "请检查你的登录信息", type: "error", plain: true });
    router.push("/login");
    store.dispatch('logout');
  }
})
</script>
 <style lang="scss">
.video {
  width: 90%;
  height: 70%;
  margin: 0 auto;
  margin-top: 80px;
}

@media (min-width: 768px) {
  .video {
    width: 70%; /* 中等屏幕宽度 */
    margin-top: 80px; /* 中等屏幕上边距 */
  }
}

@media (min-width: 1024px) {
  .video {
    width: 60%; /* 大屏幕宽度 */
    margin-top: 80px; /* 大屏幕上边距 */
  }
}

@media (min-width: 1200px) {
  .video {
    width: 50%; /* 更大屏幕宽度 */
  }
}

.list_video {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  // justify-content: center;
  // margin-top: 20px;
}
</style>
